<template>
  <div>
    <div style="text-align: left">
      <el-form
        :inline="true"
        ref="apiConfigQueryForm"
        :model="apiConfigQueryForm"
        size="mini"
      >
        <el-form-item label="API名称">
          <el-input v-model="apiConfigQueryForm.apiName"></el-input>
        </el-form-item>
        <el-form-item label="路径">
          <el-input v-model="apiConfigQueryForm.path"></el-input>
        </el-form-item>
        <el-form-item label="协议类型">
          <el-select
            clearable
            v-model="apiConfigQueryForm.protocol"
            filterable
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in protocolOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            clearable
            v-model="apiConfigQueryForm.status"
            filterable
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <div style="text-align: right">
          <el-form-item>
            <el-button @click="reset()">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit">查询</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div>
      <el-table
        v-loading="loading"
        :data="apiConfigPageResult.result"
        size="mini"
        :header-cell-style="headerCellStyle"
      >
        <el-table-column prop="apiName" label="名称">
          <template slot-scope="scope">
            <el-link
              :underline="false"
              type="primary"
              @click="detail(scope.$index, scope.row)"
              >{{ scope.row.apiName }}</el-link
            >
          </template>
        </el-table-column>
        <el-table-column prop="path" label="路径"></el-table-column>
        <el-table-column prop="protocol" label="协议">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.protocol"
              size="small"
              :type="getProtocolTag(scope.row.protocol)"
              disable-transitions
              >{{ scope.row.protocol }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="httpMethod" label="请求方式">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.httpMethod" size="small" disable-transitions >{{ scope.row.httpMethod }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="retryCount" label="重试次数"></el-table-column>
        <el-table-column prop="limit" label="限流配置"></el-table-column>
        <el-table-column prop="statusDesc" label="状态">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.statusDesc"
              size="small"
              :type="getStatusTag(scope.row.status)"
              disable-transitions
              >{{ scope.row.statusDesc }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="createTime" width="140" label="创建时间"></el-table-column>
        <el-table-column prop="updateTime" width="140" label="更新时间"></el-table-column>
        <el-table-column prop="operate" width="150" label="操作">
          <template slot-scope="scope">
            <div>
              <el-tooltip content="编辑" placement="top" :hide-after="buttonToolTipHideAfter">
                <el-button
                  size="mini"
                  circle
                  type="primary"
                  v-if="
                    scope.row.status === 'DRAFT' ||
                    scope.row.status === 'OFFLINE'
                  "
                  icon="el-icon-edit"
                  @click="edit(scope.$index, scope.row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="上线" placement="top" :hide-after="buttonToolTipHideAfter">
                <el-button
                  size="mini"
                  circle
                  type="success"
                  v-if="
                    scope.row.status === 'DRAFT' ||
                    scope.row.status === 'OFFLINE'
                  "
                  icon="el-icon-upload2"
                  @click="online(scope.$index, scope.row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="下线" placement="top" :hide-after="buttonToolTipHideAfter">
                <el-button
                  size="mini"
                  circle
                  type="warning"
                  v-if="scope.row.status === 'ONLINE'"
                  icon="el-icon-download"
                  @click="offline(scope.$index, scope.row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="测试" placement="top" :hide-after="buttonToolTipHideAfter">
                <el-button
                  size="mini"
                  circle
                  v-if="scope.row.status === 'ONLINE'"
                  icon="el-icon-smoking"
                  @click="testApi(scope.$index, scope.row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top" :hide-after="buttonToolTipHideAfter">
                <el-button
                  size="mini"
                  circle
                  type="danger"
                  v-if="
                    scope.row.status === 'DRAFT' ||
                    scope.row.status === 'OFFLINE'
                  "
                  icon="el-icon-delete"
                  @click="del(scope.$index, scope.row)"
                ></el-button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align: right">
      <el-pagination
        small
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="apiConfigPageResult.currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="apiConfigPageResult.totalCount"
      >
      </el-pagination>
    </div>
    <el-dialog
      style="text-align: left"
      width="60%"
      :visible.sync="showDetail"
      destroy-on-close
    >
      <span slot="title" style="font-size: 16px; font-weight: bold">
        API详情[{{ apiConfigDetail.apiName }}]
      </span>
      <div>
        <el-descriptions title="API信息" size="medium">
          <el-descriptions-item label="协议">
            <el-tag
              size="small"
              :type="getProtocolTag(apiConfigDetail.protocol)"
              disable-transitions
              >{{ apiConfigDetail.protocol }}</el-tag
            >
          </el-descriptions-item>
          <el-descriptions-item label="API名称">{{
            apiConfigDetail.apiName
          }}</el-descriptions-item>
          <el-descriptions-item label="API路径">{{
            apiConfigDetail.path
          }}</el-descriptions-item>
          <el-descriptions-item label="请求方法">
            <el-tag size="small" type="warning" disable-transitions>{{
              apiConfigDetail.httpMethod
            }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="MIME">{{
            apiConfigDetail.contentType
          }}</el-descriptions-item>
          <el-descriptions-item label="API描述">{{
            apiConfigDetail.apiDesc
          }}</el-descriptions-item>
          <el-descriptions-item label="限流配置"
            >{{ apiConfigDetail.limit }}/分钟</el-descriptions-item
          >
        </el-descriptions>
        <el-descriptions
          title="http接口信息"
          v-if="apiConfigDetail.protocol == 'HTTP'"
          :column="2"
          size="medium"
        >
          <el-descriptions-item label="http地址">{{
            apiConfigDetail.targetUrl
          }}</el-descriptions-item>
          <el-descriptions-item label="重试次数">{{
            apiConfigDetail.retryCount
          }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions
          title="dubbo接口信息"
          v-if="apiConfigDetail.protocol == 'DUBBO'"
          size="medium"
        >
          <el-descriptions-item label="注册中心">{{
            apiConfigDetail.regCenterUrl
          }}</el-descriptions-item>
          <el-descriptions-item label="接口名称">{{
            apiConfigDetail.interfaceName
          }}</el-descriptions-item>
          <el-descriptions-item label="方法名称">{{
            apiConfigDetail.methodName
          }}</el-descriptions-item>
          <el-descriptions-item label="版本号">{{
            apiConfigDetail.version
          }}</el-descriptions-item>
          <el-descriptions-item label="超时时间">{{
            apiConfigDetail.timeout
          }}</el-descriptions-item>
          <el-descriptions-item label="重试次数">{{
            apiConfigDetail.retryCount
          }}</el-descriptions-item>
          <el-descriptions-item label="组">{{
            apiConfigDetail.group
          }}</el-descriptions-item>
        </el-descriptions>
        <el-table
          v-if="apiConfigDetail.protocol == 'DUBBO'"
          size="small"
          :data="apiConfigDetail.paramTypeConfigs"
          border
          style="width: 100%"
        >
          <el-table-column prop="name" label="参数名称"> </el-table-column>
          <el-table-column prop="type" label="参数类型"> </el-table-column>
          <el-table-column prop="customer" label="自定义">
            <template slot-scope="scope">
              <el-tag
                size="small"
                :type="scope.row.customer ? 'success' : 'danger'"
                disable-transitions
                >{{ scope.row.customer ? "是" : "否" }}</el-tag
              >
            </template>
          </el-table-column>
        </el-table>
        <el-descriptions title="参数映射信息" size="medium"></el-descriptions>
        <el-table
          :data="[apiConfigDetail.reqParamMapping]"
          style="width: 100%"
          border
          row-key="uid"
          stripe
          size="mini"
          :tree-props="{
            children: 'children',
            hasChildren: 'hasChildren',
          }"
        >
          <el-table-column prop="targetName" label="目标名称"></el-table-column>
          <el-table-column prop="originalName" label="原始名称"></el-table-column>
          <el-table-column prop="example" label="示例值"></el-table-column>
          <el-table-column prop="paramType" label="参数类型"></el-table-column>
          <el-table-column prop="required" label="是否必填">
            <template slot-scope="scope">
              <el-tag
                v-if="scope.row.pid != null"
                size="small"
                :type="scope.row.required ? 'success' : 'danger'"
                disable-transitions
                >{{ scope.row.required ? '是' : '否' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="desc" label="描述"></el-table-column>
        </el-table>
        <el-table
          :data="[apiConfigDetail.respParamMapping]"
          style="width: 100%; margin-top: 20px"
          border
          row-key="uid"
          stripe
          size="mini"
          :tree-props="{
            children: 'children',
            hasChildren: 'hasChildren',
          }"
        >
          <el-table-column prop="targetName" label="目标名称"></el-table-column>
          <el-table-column prop="originalName" label="原始名称"></el-table-column>
          <el-table-column prop="example" label="示例值"></el-table-column>
          <el-table-column prop="paramType" label="参数类型"></el-table-column>
          <el-table-column prop="required" label="是否必填">
            <template slot-scope="scope">
              <el-tag
                v-if="scope.row.pid != null"
                size="small"
                :type="scope.row.required ? 'success' : 'danger'"
                disable-transitions
                >{{ scope.row.required ? '是' : '否' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="desc" label="描述"></el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="showDetail = false">关闭</el-button>
        <!-- <el-button
          v-if="
            apiConfigDetail.status === 'DRAFT' ||
            apiConfigDetail.status === 'OFFLINE'
          "
          type="primary"
          size="small"
          @click="edit(null, apiConfigDetail.id)"
          >去编辑</el-button
        > -->
      </span>
    </el-dialog>
    <el-dialog
      style="text-align: left"
      width="60%"
      :visible.sync="showEdit"
      destroy-on-close
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <span slot="title" style="font-size: 16px; font-weight: bold">
        编辑API[{{ editApiConfigDetail.apiName }}]
      </span>
      <api-config :editApiConfigId="editApiConfigDetail.id" @submitEdit="showEdit=false;submit()"></api-config>
    </el-dialog>
  </div>
</template>
<script>
import ajax from "~/api/ajax";
import apiConfig from "./apiConfig.vue";
export default {
  components: {
    "api-config": apiConfig,
  },
  data() {
    return {
      buttonToolTipHideAfter: 500,
      loading: false,
      showDetail: false,
      showEdit: false,
      editApiConfigDetail: {
        id: null,
        apiName: null
      },
      editApiConfigForm: {},
      protocolOptions: [],
      statusOptions: [],
      apiConfigQueryForm: {
        apiName: null,
        path: null,
        protocol: null,
        status: null,
        currentPage: 1,
        pageSize: 10,
      },
      apiConfigPageResult: {
        currentPage: 1,
        pageCount: 0,
        totalCount: 0,
        pageSize: 10,
        result: [],
      },
      apiConfigDetail: {
        id: null,
        protocol: null,
        apiName: null,
        apiDesc: null,
        status: null,
        limit: null,
        path: null,
        retryCount: null,
        regCenterUrl: null,
        interfaceName: null,
        methodName: null,
        group: null,
        timeout: null,
        targetUrl: null,
        httpMethod: null,
        contentType: null,
        paramTypeConfigs: [
          {
            name: null,
            type: null,
            customer: null,
          },
        ],
        reqParamMapping: {},
        respParamMapping: {},
      },
    };
  },
  mounted() {
    let that = this;
    ajax.get("/apiManage/protocols").then((rs) => {
      that.protocolOptions = rs.data;
    });
    ajax.get("/apiManage/statuses").then((rs) => {
      that.statusOptions = rs.data;
    });
  },
  methods: {
    headerCellStyle() {
      return "";
    },
    handleSizeChange(size) {
      this.apiConfigQueryForm.pageSize = size;
      this.submit();
    },
    handleCurrentChange(current) {
      this.apiConfigQueryForm.currentPage = current;
      this.submit();
    },
    reset() {
      this.apiConfigQueryForm = {};
    },
    submit() {
      let that = this;
      that.loading = true;
      // console.log(JSON.stringify(this.apiConfigForm));
      ajax.post("/apiManage/list", that.apiConfigQueryForm).then((rs) => {
        that.loading = false;
        if (rs.success) {
          that.apiConfigPageResult = rs.data;
        } else {
          this.$message.error("查询失败！请稍后再试！");
        }
      });
    },
    getStatusTag(status) {
      if (status == "DRAFT") {
        return "info";
      } else if (status == "ONLINE") {
        return "success";
      } else if (status == "OFFLINE") {
        return "danger";
      }
      return "";
    },
    getProtocolTag(status) {
      if (status == "DUBBO") {
        return "warning";
      } else if (status == "HTTP") {
        return "success";
      }
      return "";
    },
    detail(index, row) {
      let that = this;
      ajax.get("/apiManage/getFormApiConfig/" + row.id).then((rs) => {
        if (rs.success && rs.data != null) {
          that.apiConfigDetail = rs.data;
          console.log(JSON.stringify(that.apiConfigDetail));
          that.showDetail = true;
        } else {
          this.$message.error("查询失败！请尝试刷新");
        }
      });
    },
    edit(index, row) {
      // this.$router.push({
      //   path: "/apiManage/apiConfig",
      //   query: { id: row.id },
      // });
      let that = this;
      that.showEdit = true;
      that.editApiConfigDetail.id = row.id;
      that.editApiConfigDetail.apiName = row.apiName;
    },
    online(index, row) {
      console.log("上线的id：" + row.id);
      this.$confirm("确定上线?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "success",
      }).then(() => {
        ajax.get("/apiManage/online/" + row.id).then((rs) => {
          if (rs.success) {
            this.$message({
              type: "success",
              message: "上线成功！",
            });
            this.submit();
          } else {
            this.$message.error(rs.msg + " 请尝试刷新！");
          }
        });
      });
    },
    offline(index, row) {
      console.log("下线的id：" + row.id);
      this.$confirm("确定下线?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        ajax.get("/apiManage/offline/" + row.id).then((rs) => {
          if (rs.success) {
            this.$message({
              type: "success",
              message: "下线成功！",
            });
            this.submit();
          } else {
            this.$message.error(rs.msg + " 请尝试刷新！");
          }
        });
      });
    },
    del(index, row) {
      console.log("删除的id：" + row.id);
      this.$confirm("删除后不可恢复！", "确定删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      }).then(() => {
        ajax.get("/apiManage/delete/" + row.id).then((rs) => {
          if (rs.success) {
            this.$message({
              type: "success",
              message: "删除成功！",
            });
            this.submit();
          } else {
            this.$message.error(rs.msg + " 请尝试刷新！");
          }
        });
      });
    },
    testApi(index, row) {
      this.$router.push({path: '/apiManage/apiTest', query: {id: row.id}}) 
    }
  },
};
</script>
<style scoped>
</style>